<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        #chat-container {
            display: flex;
            flex-direction: column;
            width: 800px;
            height: 500px;
            border: 1px solid #ccc;
            border-radius: 10px;
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        #messages {
            flex: 1;
            padding: 10px;
            overflow-y: auto;
            scrollbar-width: none; /* Firefox */
        }

        #messages::-webkit-scrollbar {
            display: none; /* WebKit */
        }

        .message-wrapper {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            clear: both; /* Clear floats */
        }

        .message {
            padding: 10px;
            border-radius: 5px;
            word-break: break-word;
            max-width: 70%;
        }

        .message.sent {
            background-color: #dcf8c6;
            margin-left: auto;
        }

        .message.received {
            background-color: #fff;
            margin-right: auto;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin: 0 10px;
        }

        .message-wrapper.sent .avatar {
            order: 2; /* Move avatar to the right for sent messages */
        }

        .message-wrapper.received .avatar {
            order: 0; /* Move avatar to the left for received messages */
        }

        #input-container {
            display: flex;
            padding: 10px;
            border-top: 1px solid #ccc;
        }

        #input-container input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
        }

        #input-container button {
            margin-left: 10px;
            padding: 10px;
            border: none;
            background-color: #4caf50;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            outline: none;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <div id="chat-container">
            <div id="messages">
                <div v-for="msg in messages" :class="['message-wrapper', msg.type]">
                    <img :src="msg.avatar" class="avatar" alt="Avatar">
                    <div :class="['message', msg.type]" v-text="msg.content"></div>
                </div>
            </div>
            <div id="input-container">
                <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息..."/>
                <button @click="sendMessage">发送</button>
            </div>
        </div>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/admin/sysMessage.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                messages: [],
                newMessage: '',
                ws: null
                // senderAvatar: 'path/to/sender-avatar.png', // 替换为发送方头像的实际路径
                // receiverAvatar: 'path/to/receiver-avatar.png' // 替换为接收方头像的实际路径
            }
        },
        created() {
            this.initWebSocket();
        },
        methods: {
            initWebSocket() {
                var socketUrl = BASE_URL + "/websocket/" + localStorage.getItem("userId");
                socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
                this.ws = new WebSocket(socketUrl); // 替换为你的 WebSocket 服务器地址
                this.ws.onmessage = this.handleMessage;
                this.ws.onopen = () => console.log('WebSocket连接已建立');
                this.ws.onclose = () => console.log('WebSocket连接已关闭');
                this.ws.onerror = error => console.error('WebSocket错误: ', error);
            },
            handleMessage(event) {
                const message = JSON.parse(event.data);
                this.messages.push({
                    content: message.content,
                    type: 'received',
                    avatar: message.receiverAvatar, // 使用接收方头像
                    nickname: message.receiverName // 使用接收方头像
                });
            },
            sendMessage() {
                if (this.newMessage === '' || this.newMessage.trim() === '' || this.newMessage.trim() === null) {
                    layer.msg("消息不能为空");
                    return;
                }
                let params = {}
                params.content = this.newMessage
                requests({
                    url: '/admin/sysMessage/sendMsg',
                    method: 'post',
                    data: params
                }).then(res => {
                    let username = JSON.parse(localStorage.getItem("mars-sysUser")).userName
                    this.messages.push({
                        content: this.newMessage,
                        type: 'sent',
                        avatar: localStorage.getItem("avatar"),
                        nickname: username
                    })
                    this.newMessage = ""
                })
            }
        }
    });
</script>
</html>
